
/**
 * @param {string} html 
 */
function create(context, html) {
  return {
    template : html,
    data : function () {
      return {
        status : null,
        // 音量部分
        audioVolumeDirty : false,
        audioVolume : 0,
        seVolumeDirty : false,
        seVolume : 0,
      };
    },
    props : {
      sid : String,
    },
    methods : {
      btnVolumeReset : function () {
        this.audioVolumeDirty = false;
        this.seVolumeDirty = false;
        this.audioVolume = parseInt(this.status.data.audioVolume * 100);
        this.seVolume = parseInt(this.status.data.seVolume * 100);
      },
      btnVolumeSubmit : function () {
        let data = {};
        if (this.audioVolumeDirty) {
          data.audio = this.audioVolume / 100;
          this.audioVolumeDirty = false;
        }
        if (this.seVolumeDirty) {
          data.se = this.seVolume / 100;
          this.seVolumeDirty = false;
        }
        context.sendCommand(this.sid, 'audioVolume', data);
      },
      onAudioVolumeChange : function () {
        this.audioVolumeDirty = true;
      },
      onSeVolumeChange : function () {
        this.seVolumeDirty = true;
      },

      // 监听事件部分
      onScreenUpdated : function () {
        this.status = context.getStatus(this.sid);
        if (this.status == null) {
          return;
        }
        if (!this.audioVolumeDirty) {
          this.audioVolume = parseInt(this.status.data.audioVolume * 100);
        }
        if (!this.seVolumeDirty) {
          this.seVolume = parseInt(this.status.data.seVolume * 100);
        }
      },
    },
    mounted : function () {
      this.onScreenUpdated();
      context.getBus().$on('screen-status-sync-all', this.onScreenUpdated);
      context.getBus().$on('screen-updated', this.onScreenUpdated);
      context.getBus().$on('screen-destroyed', this.onScreenUpdated);
    },
    destroyed : function () {
      context.getBus().$off('screen-status-sync-all', this.onScreenUpdated);
      context.getBus().$off('screen-updated', this.onScreenUpdated);
      context.getBus().$off('screen-destroyed', this.onScreenUpdated);
    }
  }
}

export default create;